<template>
  <div class="row pic-upload-and-choose">
    <div class="col">
      <el-button @click="choosePic" type="primary" style="margin-bottom: 15px"><i class="fa fa-picture-o"></i> 添加图片
      </el-button>
      <div>
        <ul class="el-upload-list el-upload-list--picture-card">
          <li tabindex="0" v-for="item in uploadFiles" :key="item.id" class="el-upload-list__item is-success">
            <div>
              <img
                :src="item.url"
                alt=""
                class="el-upload-list__item-thumbnail">
              <i class="el-icon-close"></i>
              <i class="el-icon-close-tip">按 delete 键可删除</i>
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)"><i
                  class="el-icon-zoom-in"></i></span>
            </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :visible.sync="choosePicShow" title="选择图片(可按Esc键退出)" width="1600px" top="5vh">
      <div class="row">
        <div class="col">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :data="params"
            :on-success="onSuccess"
            :on-error="onError"
            :on-progress="onProgress"
            :file-list="uploadFiles"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip red">只能上传jpg/png格式的图片,且不超过5m</div>
          </el-upload>
        </div>
      </div>
      <h5 class="group-title">已有图片列表</h5>
      <div class="row">
        <div class="col">
          <div class="pic-list">
            <ul class="el-upload-list el-upload-list--picture-card">
              <li tabindex="0" v-for="item in picList" :key="item.id" class="el-upload-list__item is-success"
                  @click="addFile(item)">
                <div class="row">
                  <div class="col">
                    <div><img
                      :src="smallImg(item.url)"
                      :alt="item.name" class="el-upload-list__item-thumbnail img-thumbnail"
                    />
                    </div>
                    <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)"><i
                      class="el-icon-zoom-in"></i></span>
                  </span>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="text-center text-truncate">
                      {{item.name}}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="row" slot="footer">
        <div class="col">
          <el-pagination
            @size-change="handleCurrentSize"
            @current-change="handleCurrentPage"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" class="text-right">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" title="预览" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
  import UploadMix from 'src/components/common/js/upload-mix'
  import AdminService from 'src/service/admin'

  export default {
    name: 'HPicUploadAndChoose',
    mixins: [UploadMix],
    data() {
      return {
        params: {},
        action: '',
        dialogVisible: false,
        dialogImageUrl: '',
        choosePicShow: false,
        picList: [],
        uploadFiles: [],
        tempIndex: 1,
        pagination: {
          total: 0,
          page: 1,
          limit: 20
        }
      }
    },
    props: {
      files: {
        type: Array
      },
      owner: {
        type: String,
        default: 'o'
      }
    },
    watch: {
      files: {
        immediate: true,
        handler(files) {
          this.uploadFiles = files.map(item => {
            if (typeof item == 'string') {
              return {
                uid: (Date.now() + this.tempIndex++),
                status: 'success',
                url: item
              }
            } else {
              item.uid = item.uid || (Date.now() + this.tempIndex++)
              item.status = 'success'
            }
            return item
          })
        }
      }
    },
    methods: {
      smallImg: function (url) {
        return url + "?x-oss-process=style/small";
      },
      handleCurrentSize: function (size) {
        this.pagination.limit = size
        this.getList()
      },
      handleCurrentPage: function (page) {
        this.pagination.page = page
        this.getList()
      },
      addFile(item) {
        let i = 0
        let needAdd = true
        for (i = 0; i < this.uploadFiles.length; i++) {
          if (this.uploadFiles[i] === item) {
            needAdd = false
            break
          }
        }
        if (needAdd) {
          this.files.push(item.url)
        } else {
          this.$message.info('该图片已经添加过了!')
        }
      },
      choosePic() {
        this.choosePicShow = true
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      onSuccess: function (response, file, fileList) {
        if (response != null && response.code === 0) {
          const data = response.datas[0]
          this.files.push(data.url)
        } else {
          this.$message.error('上传失败请重新尝试.')
        }
      },
      onError: function (err, file, fileList) {
        this.$message.error(err)
      },
      getList: function () {
        const me = this
        if (this.owner === 'admin') {
          AdminService.picList(me.pagination.page, me.pagination.limit).then(function (datas) {
            me.processPicList(datas)
          })
        } else {
          //个人信息查询
        }
      },
      processPicList: function (datas) {
        if (datas != null) {
          this.picList = datas.datas
          this.pagination = datas.pagination
        }
      },
      handleRemove(file, fileList) {
        let i = 0
        for (; i < this.uploadFiles.length; i++) {
          if (this.uploadFiles[i] === file) {
            break
          }
        }
        this.files.splice(i, 1)
      },
    },
    //加载数据
    beforeMount: function () {
      this.getList()
    }
  }
</script>
